<script setup>
import { ref, toRaw, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import yuanshen from '../assets/images/yuanshen.png'
import benghuai from '../assets/images/benghuai.png'
import yxlm from '../assets/images/yxlm.jpg'
import yjwj from '../assets/images/yjwj.webp'
import autoImg from '../assets/images/auto.png'
import router from '@/router'
defineOptions({
  name: 'userLogin'
})
const visible = ref(false)
const autoData = [
  {
    title: '元神：115',
    signalUrl: 'http://192.168.137.115:8095',
    img: yuanshen,
    localId: '3333',
    remoteId: '4444'
  },
  {
    title: '崩坏：122',
    signalUrl: 'http://192.168.137.122:8095',
    img: benghuai,
    localId: '3333',
    remoteId: '4444'
  },
  {
    title: '英雄联盟：115',
    signalUrl: 'http://192.168.137.115:8095',
    img: yxlm,
    localId: '4061',
    remoteId: '4060'
  },
  {
    title: '永劫无间：115',
    signalUrl: 'http://192.168.137.115:8095',
    img: yjwj,
    localId: '4071',
    remoteId: '4070'
  }
]
const getDataList = () => {
  return localStorage.getItem('dataList') ? JSON.parse(localStorage.getItem('dataList')) : autoData
}
const state = reactive({
  column: [
    {
      label: '游戏名称',
      prop: 'title',
      slot: true,
      width: 160
    },
    {
      label: 'signalUrl',
      prop: 'signalUrl',
      slot: true
    },
    {
      label: 'localId',
      prop: 'localId',
      width: 100,
      slot: true
    },
    {
      label: 'remoteId',
      prop: 'remoteId',
      width: 100,
      slot: true
    },
    {
      label: '操作',
      prop: 'action',
      slot: true
    }
  ],
  tableData: [],
  dataList: getDataList()
})
const goGame = (item) => {
  window.location.href = `electronTest://open-client?signalUrl=${item.signalUrl}&localId=${item.localId}&remoteId=${item.remoteId}`
}
const setGame = () => {
  visible.value = true
  state.tableData = JSON.parse(
    JSON.stringify(
      toRaw(state.dataList).concat([
        {
          title: '',
          signalUrl: '',
          img: autoImg,
          localId: '',
          remoteId: ''
        }
      ])
    )
  )
}
const modifyGame = (row, index) => {
  state.dataList[index] = JSON.parse(JSON.stringify(toRaw(row)))
  ElMessage.success('修改成功')
  localStorage.setItem('dataList', JSON.stringify(state.dataList))
}
const delGame = (index) => {
  state.tableData.splice(index, 1)
  state.dataList.splice(index, 1)
  ElMessage.success('删除成功')
  localStorage.setItem('dataList', JSON.stringify(state.dataList))
}
const addGame = (row, index) => {
  if (row.title === '' || row.signalUrl === '' || row.localId === '' || row.remoteId === '') {
    ElMessage.error('请填写完整配置信息')
    return
  }
  state.dataList.push(JSON.parse(JSON.stringify(toRaw(row))))
  state.tableData.splice(index + 1, 0, row)
  ElMessage.success('添加成功')
  state.tableData[state.tableData.length - 1] = {
    title: '',
    signalUrl: '',
    img: autoImg,
    localId: '',
    remoteId: ''
  }
  localStorage.setItem('dataList', JSON.stringify(state.dataList))
}
const goStream = () => {
  router.push('/peerStream')
}
</script>
<template>
  <div class="login font-sans">
    <!--游戏配置-->
    <uc-drawer :isFooter="false" size="800px" v-model="visible" title="游戏配置">
      <uc-table border :column="state.column" :data="state.tableData">
        <template #title="{ row }">
          <el-input type="text" v-model="row.title" />
        </template>
        <template #signalUrl="{ row }">
          <el-input type="text" v-model="row.signalUrl" />
        </template>
        <template #localId="{ row }">
          <el-input type="text" v-model="row.localId" />
        </template>
        <template #remoteId="{ row }">
          <el-input type="text" v-model="row.remoteId" />
        </template>
        <template #action="{ row, index }">
          <div class="action-btn-width">
            <uc-button
              v-if="index != state.tableData.length - 1"
              link
              type="primary"
              size="small"
              @click="modifyGame(row, index)"
              >修改</uc-button
            >
            <uc-button
              v-if="index != state.tableData.length - 1"
              @delClick="delGame(index)"
              title="提示"
              message="确定删除游戏配置吗?"
              link
              type="danger"
              size="small"
              >删除</uc-button
            >
            <uc-button
              v-if="index == state.tableData.length - 1"
              link
              type="primary"
              size="small"
              @click="addGame(row, index)"
              >新增配置</uc-button
            >
          </div>
        </template>
      </uc-table>
    </uc-drawer>
    <div class="header">
      <div class="title font-serif">
        <span>云游戏列表</span>
        <span @click="setGame" style="cursor: pointer"> 游戏配置</span>
      </div>
    </div>
    <div class="content">
      <div class="overflow:auto">
        <div
          @click="goGame(item)"
          class="game-list"
          v-for="(item, index) in state.dataList"
          :key="index"
        >
          <img :src="item.img" :alt="item.title" />
          <div class="title hover:text-zinc-300">{{ item.title }}</div>
          <div class="start-btn">启动</div>
        </div>
        <div @click="goStream" class="game-list">
          <div class="title hover:text-zinc-300">基于PWT服务端的拉流</div>
          <div class="start-btn">拉流</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    height: 50px;
    background-color: rgb(48, 64, 81);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-app-region: drag;
    .title {
      width: 960px;
      display: flex;
      justify-content: space-between;
    }
  }
  .content {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 20px;
    .game-list {
      width: 150px;
      background-color: #28333d;
      height: 220px;
      float: left;
      margin-left: 4%;
      margin-bottom: 20px;
      cursor: pointer;
      color: #fff;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
      img {
        width: 120px;
        height: 120px;
        border-radius: 20px;
        display: block;
      }
      .title {
        padding: 12px 0;
        font-size: 12px;
      }
      .start-btn {
        width: 70px;
        padding: 5px 0;
        border-radius: 30px;
        background-color: #03c47e;
        text-align: center;
        color: #fff;
        font-size: 12px;
      }
      &:hover {
        background-color: rgb(48, 64, 81);
      }
    }
  }
}
</style>
